<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会系统信息管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">打印各种样本</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="print-card">
            <el-table :data="currentPageData" border>
                <el-table-column label="编号" width="80" align="center">
                    <template #default="scope">
                        <span>{{ (queryObj.limit * (queryObj.page - 1)) + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="样本文件名" >
                    <template #default="scope">
                        <a href="#" @click="downloadFile(scope.row)">{{ scope.row.name }}</a>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            printData: [
                { name: '01 人工计时竞赛卡片.doc' },
                { name: '02 人工计时存查表.doc' },
                { name: '03 自动计时技术统计表.doc' },
                { name: '04 终点存查表.doc' },
                { name: '05 终点综合名次登记表.doc' },
                { name: '06 比赛名次报告表.doc' },
                { name: '07 检查表.doc' },
                { name: '07 长距离项目记趟表.DOC' },
                { name: '08 检查表(英中对照1).doc' },
                { name: '08 犯规检查表.doc' },
                { name: '09 检查表(英中对照2).doc' },
                { name: '09 犯规检查表(英中对照1).doc' },
                { name: '10 接力棒次表.doc' },
                { name: '10 犯规检查表(英中对照2).doc' },
                { name: '11 接力棒次表(英).doc' },
                { name: '11 接力棒次表.doc' },
                { name: '12 分段创纪录申请表.doc' },
                { name: '12 接力棒次表(英).doc' },
                { name: '13 分段成绩创纪录申请表.doc' },
                { name: '13 发令正误统计表.doc' },
                { name: '14 发令正误及运动员犯规统计表.doc' },
                { name: '14 弃权表.doc' },
                { name: '15 弃权报告单.doc' },
                { name: '15 弃权表(英).doc' },
                { name: '16 弃权报告单(英).doc' },
                { name: '16 替补与更正表(英).doc' },
                { name: '17 成绩证明单.doc' },
                { name: '17 替补与更正表(英).doc' },
                { name: '18 成绩证明申请表.doc' },
                { name: '19 成绩证明单.doc' },
                { name: '19 申诉书.doc' },
                { name: '20 申诉书(英).doc' },
                { name: '20 申诉书.doc' },
                { name: '21 总裁判意见仲裁决议书.doc' },
                { name: '21 申诉书(英).doc' },
                { name: '22 总裁判意见仲裁决议书.doc' },
                { name: '22 裁判工作总结表.doc' },
                { name: '23 总裁判签名单.doc' },
                { name: '23 裁判工作总结表.doc' },
                { name: '24 宣告用语示例.DOC' },
                { name: '24 总裁判签名单.doc' },
                { name: '25 世界纪录申请表(英).doc' },
                { name: '25 宣告用语示例.DOC' },
                { name: '26 世界纪录申请表(英).doc' },
            ],
            queryObj: {
                limit: 15,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
        }
    },
    created() {
        this.total = this.printData.length
        this.fetchData()
    },
    methods: {
        // 导出数据
        async downloadFile(val) {
            const result = await this.$http.get(this.BACKEND_URL + '/doc/getdoc', {
                params: { name: val.name },
                responseType: 'blob',
            });

            let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

            const link = document.createElement('a');
            link.href = downloadUrl;
            link.setAttribute('download', val.name);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.printData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.printData.slice(startIndex, endIndex);
        }
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    color: #354897;
}

.print-card {
    margin-top: 15px;
}
.paging{
    margin-top: 15px
}
</style>